<!--
 * @Description: 
 * @Version: 1.0.1
 * @Autor: hrlu.cn
 * @Date: 2022-06-27 21:44:06
 * @LastEditors: error: git config user.name && git config user.email & please set dead value or install git
 * @LastEditTime: 2022-08-13 22:40:46
-->
{% extends "base.html" %}

{% block cssextend %}
    <link href="/assets/vendor/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/assets/css/bootstrap-table-custom.css" rel="stylesheet">
{% endblock %}

{% block cssstyle %}
{% endblock %}

{% block content %}
     <!-- DATA TABLE-->
     <section class="p-t-20">
        <div class="container">
            <div class="row">
                <div class="col-sm-12">
                    <div class="statistic-chart-1">
                        <h3 class="title-3 m-b-30">个股资金流入情况</h3>
                        
                        <table id="concept-stock-table" class="table table-hover">
                            <thead>
                                <tr>
                                    <th data-field="scode" data-sortable="true">股票代码</th>
                                    <th data-align="center" data-field="sname" data-sortable="true">股票名称</th>
                                    <th data-align="center" data-field="industry" data-sortable="true">所属行业</th>
                                    <th data-align="center" data-field="concepts" data-formatter="textOverFlowDisplay">所属概念</th>

                                    <th data-align="center" data-field="change_rate" data-sortable="true">涨跌幅</th>
                                    <th data-align="center" data-field="turnover_rate" data-sortable="true">换手率</th>
                                    <th data-align="center" data-field="net_mf_d5" data-sortable="true">5日净流入额</th>
                                    <th data-align="center" data-field="pos_mf_d5_cnt" data-sortable="true">5日正净流入额天数</th>
                                    <th data-align="center" data-field="net_mf_d20" data-sortable="true">20日净流入额</th>
                                    <th data-align="center" data-field="pos_mf_d20_cnt" data-sortable="true">20日正净流入额天数</th>
                                    <th data-align="center" data-field="net_mf_d60" data-sortable="true">60日净流入额</th>
                                    <th data-align="center" data-field="pos_mf_d60_cnt" data-sortable="true">60日正净流入额天数</th>
                                </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <div class="" id="concept-stock-toolbar">
        <div class="input-group">
            <select class="form-control form-control-sm" tabindex="-1" name="trade_date" id="conceptStockTradeDateSelect">
                {% for p in trade_dates %}
                    <option value="{{ p | date:"Y-m-d" }}">{{ p | date:"Y-m-d" }}</option>
                {% endfor %}
            </select>
        </div>
    </div>
{% endblock %}

{% block jsextend %}
    <script src="/assets/vendor/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="/assets/vendor/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

    <script src="/assets/vendor/tableexport/tableExport.min.js"></script>
    <script src="/assets/vendor/bootstrap-table/bootstrap-table-export.min.js"></script>
    <!--script src="/assets/vendor/jspdf/jspdf.min.js"></script>
    <script src="/assets/vendor/jspdf/jspdf.plugin.autotable.js"></script-->
    <script src="/assets/js/echarts.min.js"></script>
{% endblock %}

{% block jsscript %}
<script>
    var tableOption = {
        updateUrl: function () { this.url = '/api/concept_stock_daily_data?trade_date=' + $('#conceptStockTradeDateSelect').val()},

        responseHandler: function (res, jqXHR) {
            for (var idx in res.rows) {
                var row = res.rows[idx];

                ['turnover_rate', 'change_rate'].forEach(function (field) {
                    row[field] = digitFormatter(row[field] / 100, 'percentage');
                });

                ['net_mf_d5', 'net_mf_d20', 'net_mf_d60'].forEach(function (field) {
                    row[field] = digitFormatter(row[field] * 10000, 'CNY');
                });

                ['net_mf_d5', 'net_mf_d20', 'net_mf_d60', 'change_rate'].forEach(function (field) {
                    row[field] = dyeingFormatter(row[field]);
                }); 
            }
            return res;
        },
        align: 'center',
        search: true,
        showRefresh: true,
        showColumns: true,
        iconSize: 'sm',

        classes: 'table',
        toolbar: '#concept-stock-toolbar',

        sortable: true,
        serverSort: true,

        pagination: true,
        sidePagination: 'server',
        pageSize: 10,
        pageList: [10, 20, 50, 100, 1000],

        showExport: true,
        exportDataType: '',
        exportTypes: ['json', 'csv', 'txt', 'sql', 'excel'], //  'pdf', 'xml', 

        onPostBody: function(data) {$("[data-toggle='popover']").popover();},
    };
    tableOption.updateUrl();
    $('#concept-stock-table').bootstrapTable(tableOption);

    $('#conceptStockTradeDateSelect').change(function () {
        tableOption.updateUrl();
        $('#concept-stock-table').bootstrapTable('refreshOptions', tableOption);
    });

    searchInputPopover();

</script>
{% endblock %}